<template>
	<view class="rate-box" :class="centerStyle?'centerStyle':''" :style="cusStyle">
		<view>
			<u-rate active-color="#f2cb51" :current="rating/20" :count="5" :disabled="true"></u-rate>
		</view>
		<view style="margin-left: 10rpx">{{ rating }}</view>
	</view>
</template>

<script>
	export default {
		props: {
			num: {
				type: [Number,String],
				default: 0,
				required: false
			},
			flag: {
				type: [Number,String],
				default: 0,
			},
			cusStyle: {
				type: String,
				default: '',
			},
			centerStyle: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				rating: 0
			};
		},
		mounted() {
			if (this.flag == 0) {
				this.rating = this.num

			} else {
				this.rating = this.num * 20

			}
		},
	}
</script>

<style lang="scss">
	.rate-box {
		width: 100%;
		display: flex;
		flex-direction: row;
		margin-left: auto;
		justify-content: flex-end;
		text-align: right;
	}

	.centerStyle {
		justify-content: flex-start !important;
		text-align: center !important;
	}
</style>